---
type: tutorial
title: 初めてのAstroプロジェクト
description: |-
  「初めてのAstroブログ」チュートリアル -
  Astroチュートリアルのために新しいプロジェクトを作成し、コーディングの準備をする
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - `create astro` セットアップウィザードを実行して、新しいAstroプロジェクトを作成する
  - Astroサーバーを開発（dev）モードで起動する
  - ブラウザでウェブサイトのライブプレビューを表示する
</PreCheck>

## Astroのセットアップウィザードを起動する

新しいAstroサイトを作成するおすすめの方法は、`create astro`セットアップウィザードを使用することです。

<Steps>
1. ターミナルのコマンドラインで、お好みのパッケージマネージャーを使用して次のコマンドを実行します。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # npmで新しいプロジェクトを作成する
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # pnpmで新しいプロジェクトを作成する
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # yarnで新しいプロジェクトを作成する
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. `y`を入力して`create-astro`をインストールすることを確認します。
3. プロンプトが「新しいプロジェクトをどこに作成しますか？（Where would you like to create your new project?）」と尋ねるので、新しいプロジェクトのフォルダ名を入力します（たとえば`./tutorial`など）。

    :::note
    新しいAstroプロジェクトは、完全に空のフォルダにしか作成できません。まだ存在しないフォルダ名を選択してください！
    :::

4. スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。

5. プロンプトがTypeScriptを使用する予定かどうか尋ねるので、`n`を入力します。

6. プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、`y`を入力します。

7. プロンプトが「新しいgitリポジトリを初期化しますか？（Would you like to initialize a new git repository?）」と尋ねるので、`y`を入力します。
</Steps>

インストールウィザードが完了したら、このターミナルはもう不要です。VS Codeを開いて続きの作業をおこないます。

## VS Codeでプロジェクトを開く

<Steps>
8. VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。

9. Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、[Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。

10. 以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[キーボードショートカット]
    ターミナルの表示と非表示を切り替えるには、<kbd>Ctrl + J</kbd>（macOSでは<kbd>Cmd ⌘ + J</kbd>）を使用します。
    :::
</Steps>

これで、コンピュータのターミナルアプリではなくウィンドウ内のターミナルを使用して、チュートリアルの残りの部分を進められるようになりました。


## Astroをdevモードで実行する

作業中にプロジェクトファイルをウェブサイトとしてプレビューするには、Astroを開発（dev）モードで実行する必要があります。

### devサーバーを起動する

<Steps>
11. VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Astroがdevモードで実行されていることをターミナル上で確認できるはずです。🚀
</Steps>

## ウェブサイトのプレビューを確認する

プロジェクトファイルには、Astroウェブサイトを表示するために必要なすべてのコードが含まれていますが、コードをウェブページとして表示するのはブラウザの役割です。

<Steps>
12. ターミナルウィンドウの`http://localhost`リンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！

    （Astroは、ポート4321が使用可能な場合、デフォルトで`http://localhost:4321`を使用します。）

    Astroの「Empty Project」スターターウェブサイトは、ブラウザ上では以下のように表示されます。

    ![Astroという単語が上部に表示された白い空白のページ。](/tutorial/minimal.png)
</Steps>

:::tip[Astroのdevサーバーを使用する]

Astroサーバーがdevモードで実行されている間は、ターミナルウィンドウでコマンドを実行できません。代わりに、このペインにはサイトをプレビューした際のフィードバックが表示されます。

ターミナルで<kbd>Ctrl + C</kbd>を入力すれば、いつでもdevサーバーを停止してコマンドプロンプトに戻れます。

作業中にdevサーバーが勝手に停止することがあります。ライブプレビューが機能しなくなった場合は、ターミナルに戻り`npm run dev`と入力してdevサーバーを再起動してください。
:::

<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] 新しいAstroプロジェクトを作成できる。
- [ ] Astroのdevサーバーを起動できる。
</Checklist>
</Box>

### 参考

- <p>[Getting Started with Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge>外部サイト</Badge> — VS Codeのインストール、設定、使用方法についてのビデオチュートリアル</p>
